<template>
  <div class="wrap w-login detail">
    <header>
        <img onclick="javascript :history.back(-1);" src="@/assets/img/l_b.png" alt="" />
        {{loginWay? '手机登录/注册':'密码登录'}}
    </header>
    <form action=""  v-if="loginWay">
        <div class="group clearfix">
            <label><input type="text" placeholder="请输入手机号" v-model="phoneNumber"/></label>
            <span>手&nbsp;机&nbsp;号</span>
        </div>
        <div class="group clearfix">
            <input type="text" placeholder="请输入短信验证码" v-model="mobileCode"/>
                <span @click.prevent="getVerifyCode" v-show="!computedTime">获取验证码
                </span>
                <span  @click.prevent v-show="computedTime">已发送({{computedTime}}s)</span>        
        </div>
        <div class="group clearfix" v-show="imgCode">
            <input type="text" placeholder="请输入图形验证" />
                <img :src="imgCode" @click="getImgCode">
        </div>

        <span class="topasslogin" @click="changeLoginWay">账号密码登录</span>


        <button type="button" @click="mobileLogin">登录</button>
    </form>

    <form action="" v-else>
        <div class="group clearfix">
            <label><input type="text" placeholder="请输入账号" v-model="userAccount"/></label>
            <span>账&nbsp;&nbsp;&nbsp;号</span>
        </div>
        <div class="group clearfix">
            <label><input type="password" placeholder="请输入密码" v-model="passWord"/></label>
            <span>密&nbsp;&nbsp;&nbsp;码</span>      
        </div>
       
        <span class="topasslogin" @click="changeLoginWay">短信登录</span>


        <button type="button" @click="mobileLogin">登录</button>
    </form>

<!--     <p class="or"><span @click="test">登录</span></p> -->

</div>

</template>
<script>

export default {
  data(){
    return{
        loginWay: true, //登录方式，默认短信登录
        phoneNumber:null,
        
        mobileCode: null, //短信验证码
        computedTime:0,// 倒计时
        userInfo: null, //获取到的用户信息
        userAccount: null, //用户名
        passWord: null, //密码

        imgCode:null,//图片验证码

          
     }
  },
  created(){
    // let userInfo = this.getUserInfo();
    // console.log(userInfo.user_token)
    
  },
  mounted(){

            
  },
  components: {
    
  },
  computed: {
            //判断手机号码
            rightPhoneNumber: function (){
                return /^1\d{10}$/gi.test(this.phoneNumber)
            }
  },
  methods:{
    test(){
        this.$axios.get('/index/indexdata').then((response)=>{
                console.log(response)
            })
    },  
    getImgCode(){
        this.imgCode  = this.api_url+"/getImgCode?rnd=" + Math.random();
    },
    //发送短信验证码
    async getVerifyCode(){
        if (this.rightPhoneNumber) {
            this.computedTime = 60;
            this.timer = setInterval(() => {
                this.computedTime --;
                if (this.computedTime == 0) {
                    clearInterval(this.timer)
                }
            }, 1000)
        
            //发送短信验证码
            await this.$axios.get('/login/sendSmsCode',{
                params:{
                   phone:this.phoneNumber  
                }
            }).then((res)=>{
                if(res.code != 200){
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: res.msg,
                        icon: ''
                      }).show()
                    return
                }
            })
        
           }else{
            this.$createDialog({
                type: 'alert',
                title: '提示',
                content: '请输入正确手机号',
                icon: ''
              }).show()
            return
            
        }
    },
    //登录
    async mobileLogin(){
        if (this.loginWay) {
            if (!this.rightPhoneNumber) {
                this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '手机号码不正确!',
                        icon: ''
                      }).show()
                return
            }else if(!(/^\d{4}$/gi.test(this.mobileCode))){
                this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '短信验证码不正确!',
                        icon: ''
                      }).show()
                return
            }
            //手机号登录
          await this.$axios.get('/login/phoneLogin',{
                params:{
                   user_phone:this.phoneNumber, 
                   code:this.mobileCode,   
                }
            }).then((res)=>{
                if(res.code != 200){
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: res.msg,
                        icon: ''
                      }).show()
                    return
                }else{
                    this.userInfo = res.data
                    localStorage.setItem('userInfo',JSON.stringify(this.userInfo))
                    this.$router.go(-1);

                }
            })

        //账号密码登录   
        }else{
            if (!this.userAccount) {
                this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '请输入手机号/邮箱/用户名!',
                        icon: ''
                      }).show()
                return
                
            }else if(!this.passWord){
                this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: '请输入密码!',
                        icon: ''
                      }).show()
                return
            
            }
            // else if(!this.codeNumber){
            //     this.showAlert = true;
            //     this.alertText = '请输入验证码';
            //     return
            // }
          await this.$axios.get('/login/userLogin',{
                params:{
                   user_name:this.userAccount, 
                   user_pass:this.passWord,   
                }
            }).then((res)=>{
                if(res.code != 200){
                    this.$createDialog({
                        type: 'alert',
                        title: '提示',
                        content: res.msg,
                        icon: ''
                      }).show()
                    return
                
                }else{
                    this.userInfo = res.data
                    localStorage.setItem('userInfo',JSON.stringify(this.userInfo))
                    
                    if(this.$route.query.redirect){
                         this.$router.replace({path:this.$route.query.redirect})
                    }else{
                         this.$router.replace({path:'/'})
                    }

                }
            })
            
        }
        
    },
    //改变登录方式
    changeLoginWay(){
        this.loginWay= !this.loginWay
    },
    //关闭弹窗
    closeTip(){
        this.showAlert = false;
    }

  }

}
</script>
<style>
.topasslogin{
    float:right;
    font-size: .36rem;
    color: #3b95e9;
    margin: .2rem;
}

</style>
